<template>
	<view class="my-3 p-4"
		style="border-radius: 60rpx;  width: 80%; background-color: #f6eefe; box-shadow: 0 4px 7px #7e3db4;">
		<view class="top flex justify-between align-center" style="height: 150rpx;">
			<view class="" style="position: relative;">
				<view class="top-left avater"
					style="position: relative; width: 150rpx; height: 150rpx; overflow: hidden;  border-radius: 150rpx; border: 2px solid #a855f7;">
					<image :src="order.submit_user[0].avater" mode="aspectFill" style="height: 100%; width: 100%;"
						>
					</image>
				</view>
				<view class="sex flex justify-center align-center"
					:style="{color:order.submit_user[0].sex == '男'? 'aqua':'#fe68ca' }"
					style="width: 50rpx; height: 50rpx; font-size: 35rpx; border-radius: 50rpx; background-color:#55557f;  position: absolute; bottom: 0; right: 0;">
					<i :class="order.submit_user[0].sex == '男'? 'el-icon-male':'el-icon-female'"></i>
				</view>
			</view>


			<view class="top-mid flex-2 mx-2 flex flex-column justify-evenly align-start" style="height: 150rpx;">
				<view class="name" style="font-size: 50rpx; font-weight: bold; color: rgb(79, 54, 114);">
					{{order.submit_user[0].nickname}}
				</view>
				<text v-if="order.role == '老师'" style="font-size: 26rpx; padding-left: 5rpx; color: #4f3672;">{{order.submit_user[0].school}}</text>
				<view class="address flex justify-center align-center"
					style="color: rgb(79, 54, 114); font-size: 28rpx;">
					<i class="el-icon-location-outline"></i>
					<text>{{distence}}</text>
				</view>
			</view>
			<view class="top-right flex flex-column justify-between align-center">
				<view class="rate" v-if="order.role=='老师'"
					style="font-size: 48rpx;  font-weight: bold; color: rgb(254, 104, 202);">
					{{rate}}
					<text class="ml-1">分</text>
				</view>
				
				<view class="money mt-2" style=" color: rgb(254, 104, 202);"
					:style="{fontSize:order.role=='老师'?'28rpx':'38rpx',fontWeight:order.role=='老师'?'':'bold'}">
					{{order.money.min}}~{{order.money.max}}元/时
				</view>

			</view>
		</view>
		<view class="bottom tags flex flex-wrap justify-start align-center mt-3" style="width: 100%; ">
			<view class="tags flex justify-center align-center mb-2 ml-1" v-for="item in list"
				v-if="item.state==true"
				style="color: #fff; border-radius: 50rpx; height: 35rpx; font-size: 26rpx; padding: 15rpx 40rpx; background-color: #7b6dd9;">
				{{item.name}}
			</view>
		</view>

		<view class="submit my-2" style="width: 100%; ">
			<u-button @click="goOrderDetail" text="查看详情"
				color="linear-gradient(to right bottom,  rgb(130, 88, 186),rgb(114, 135, 254))"
				style="width: 100%; border-radius: 25rpx;"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "jiajiao_order",
		props: {
			order: {
				type: Object
			},
			userLocation:{
				type:Object
			}
		},
		data() {
			return {
             distance:null
			};
		},
computed:{
          list()
			  {
				let arr=[...this.order.grade,...this.order.subject,...this.order.tags]
				let result =[]
				 arr.forEach(item=>{
					  if(item.state==true)
					  {
						  result.push(item)
					  }
				  })
				  return result.slice(0,7)
			  },
			  distence()
			  {
				  // let otherLocation = this.order.submit_user[0].userLocation
				  
				  //         const R = 6371; // 地球半径（单位：公里）
				  //         const lat1 = this.userLocation.latitude || 0;
				  //         const lon1 = this.userLocation.longitude || 0;
				  //         const lat2 = otherLocation.latitude || 0;
				  //         const lon2 = otherLocation.longitude || 0;
				  
				  //         const toRad = (value) => (value * Math.PI) / 180;
				  //         const dLat = toRad(lat2 - lat1);
				  //         const dLon = toRad(lon2 - lon1);
				  
				  //         const a =
				  //           Math.sin(dLat / 2) * Math.sin(dLat / 2) +
				  //           Math.cos(toRad(lat1)) *
				  //             Math.cos(toRad(lat2)) *
				  //             Math.sin(dLon / 2) *
				  //             Math.sin(dLon / 2);
				  
				  //         const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				  //         this.distance = (R * c).toFixed(1);
				       
				  return 0 +'km'
			  },
			  rate(){
				  if(this.order.submit_user[0].comment){
				
				  let Comment = this.order.submit_user[0].comment
				  let data = [0, 0, 0]
				  Comment.forEach(item => {
				  	data[0] = data[0] + item.rateArr[0]
				  	data[1] = data[1] + item.rateArr[1]
				  	data[2] = data[2] + item.rateArr[2]
				  })
				  data[0] = data[0] / Comment.length
				  data[1] = data[1] / Comment.length
				  data[2] = data[2] / Comment.length
				  
				  let result = (data[0]+data[1]+data[2])/3
				  return result.toFixed(1)
				  }
				  else return '?'
			  }
			  
},
		methods: {
			goOrderDetail() {
				uni.navigateTo({
					url: `/pages/orderDetail/orderDetail?order_id=${this.order._id}&me=false`
				})
			}

		}


	}
</script>

<style lang="scss">

</style>